<template>
  <button
    class="button"
    :class="[`button__type--${type}`, `button__size--${size}`]"
  >
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: "RButton",
  props: {
    type: {
      type: String,
      default: "default",
      validator(value) {
        return ["warning", "cancel", "default"].includes(value);
      },
    },
    size: {
      type: String,
      default: "small",
      validator(value) {
        return ["small", "large"].includes(value);
      },
    },
  },
};
</script>

<style scoped lang="less">
.button {
  border: none;
  border-radius: 2px;
  color: white;
  cursor: pointer;
  outline: none;

  &__size {
    &--small {
      padding: 6px 15px;
    }
    &--large {
      padding: 8px 20px;
    }
  }

  &__type {
    &--warning {
      background: orangered;
    }
    &--cancel {
      background: lightgrey;
      color: black;
    }
    &--default {
      background: lightskyblue;
    }
  }

  &:hover {
    filter: brightness(105%);
  }
}

.button + .button {
  margin-left: 5px;
}
</style>
